
.nbtn {
  background: white;
  border: none;
  box-shadow: 0px 1px 2px RGBA(0,0,0,.2);
  text-align: center;
  margin: 10px 4px;
  padding: 10px 8px 9px 8px;
  width: 200px;
  cursor: pointer;
  font-size: 21px;
  line-height: 21px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border-bottom-width: 3px;
  overflow: hidden;
}

.collapsed{ margin-top:0; margin-bottom:0; }

.btn_label{ }

/*--- these wrappers center groups of buttons ---*/
/*--- IMPORTANT - these must be updates for any increase in button width ---*/
.wrap1btn{ margin:20px auto; width:202px; }
.wrap2btns{ margin:20px 0 0 0; overflow:hidden; }
.wrap2btns .wrapinner{ clear: both; float: left; position: relative; left: 50%; }
.wrap2btns .nbtn{ float: left; position: relative; right:50%; margin-right: 4px; }

/* wrap buttons, no center - only needed for <button> or <input> tags, to prevent page-move-button-stationary bug */
.wbnc{ position:relative; display:inline-block; }
.wbnc .nbtn{ float:left; }

/* btn_swap - browsers assign 'enter' to first button in form, but ui standard needs to be cancel, not action
              this fix changes the display order, so 'enter' will submit, not cancel */
.btn_swap .nbtn{ float:right; }

.nbtn:active { padding-top:13px; padding-bottom:6px;border-color:white; }
.nbtn:hover { text-decoration:none; }

.widebtn { font-size:17px; width:212px; height:36px; padding-top:7px; }
.widebtn:active { padding-top:9px; }

.rbtn { background-color: #d32d27; color:#FFF !important; border-color:#af0806;}
.rbtn:focus, .rbtn:hover { background-color: #af0806; border-color: #910101; color:#FFF; }
.rbtn:active { background-color: #af0806; border-color:#af0806; color:#FFF;}

.dbtn { background-color: #555555; color:#ffffff !important; border-color:#000000;}
.dbtn:focus, .dbtn:hover { background-color: #2b251a; border-color:#000000; color:#ffffff;  }
.dbtn:active { background-color: #2b251a; border-color:#2b251a; color:#ffffff; }

.gbtn { background-color: #C4C4C4; color:#FFF; border-color:#939393;}
.gbtn:focus, .gbtn:hover { background-color: #939393; border-color:#2b251a;}
.gbtn:active { background-color: #939393; border-color:#939393;}

.wbtn { background-color: #ffffff; color:#3b352a !important;}
.wbtn:hover { background-color: #f8f8f8; color:#3b352a;  }
.wbtn:active { background-color: #ffffff; color:#3b352a; }

.wbtn2 { background-color: #3b352a; color:#ffffff !important;}
.wbtn2:hover { background-color: #4c463b; color:#ffffff;  }
.wbtn2:active { background-color: #3b352a; color:#ffffff; }

.lbtn { background-color: #dddddd; color:#3b352a !important;}
.lbtn:hover { background-color: #eeeeee; color:#3b352a; }
.lbtn:active { background-color: #dddddd; color:#3b352a; }

.fbbtn { background-color: #3b5998; color:#ffffff !important;}
.fbbtn:hover { background-color: #1e3c7b; color:#ffffff;  }
.fbbtn:active { background-color: #3b5998; color:#ffffff; }
.twbtn { background-color: #55acee; color:#ffffff !important;}
.twbtn:hover { background-color: #1e3c7b; color:#ffffff;  }
.twbtn:active { background-color: #207bc0; color:#ffffff; }
.gpbtn { background-color: #dd4b39; color:#ffffff !important;}
.gpbtn:hover { background-color: #b52716; color:#ffffff;  }
.gpbtn:active { background-color: #dd4b39; color:#ffffff; }



.btn_disabled { opacity: 0.25; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; filter: alpha(opacity=25);}
.btn_mini.btn_disabled:active{padding:4px 4px 3px 4px;} 

.btn_exp_h { width:auto !important; } /* usual behaviour is to expand vertically to fit text, this uses horizontal expansion */
.widthautomargin { width:auto; margin: 5px 20px; }

.btn_mini {
    font-size:14px;
    width:116px;
    min-width:116px;
    line-height:18px !important;
    border-bottom-width:2px;
    padding:4px 4px 3px 4px;
}
.btn_mini:active {
    padding:6px 4px 1px 4px;
}

.btn_midi {
    font-size:15px;
    width:140px;
    min-width:140px;
    line-height:19px !important;
    border-bottom-width:2px;
    padding:4px 4px 3px 4px;
}
.btn_midi:active {
    padding:6px 4px 1px 4px;
}

.btn_micro {
    font-size:14px;
    display:inline; /*shrink to fit*/
    line-height:18px !important;
    border-bottom-width:2px;
    padding:4px 10px 3px 10px;
}
.btn_micro:active {
    padding:6px 4px 1px 4px;
}

.btn_mega{ width:300px; font-size:28px; line-height:42px !important; }
